/**
 * Image
 */

 import consts from "../../../../../utils/consts";
 import Header from "../Header";
 import Footer from "../Footer";
 import React,{Component} from "react";
 
 class Image extends Component{
    handleOnChangeImage(){
        console.log("open dialog");
//        var root = this.props.root;
//        root.openDialog(consts.WIDGET_TYPE.PICTURE, true, null, true);
    }
    render(){
        const {type,data,timelines,selectedWidgetId,selectContents,updateWidget,setState} = this.props;
        let actionType = data.action.type;
        let detailType = consts.WIDGET_EVENTS_MAPPING[actionType];
        let focus = ( data.widget_id == selectedWidgetId );
        var FooterNode = "";
        if(detailType){
            FooterNode = <Footer type={detailType} data={data} timelines={timelines} updateWidget={updateWidget} setState={setState} />
        }
        return (
          <div ref="content" className={"content-item " + (focus ? "focus " : " ") + (data.visible ? "unfold " : "fold ")} onClick={() => selectContents(data)}>
              <Header type={type} data={data} updateWidget={updateWidget} setState={setState} />
              <div className="content">
                  <div>
                      <img src={data.url || ""} />
                  </div>
                  <button onClick={() => this.handleOnChangeImage()}>{$._("Replace")}{$._("Picture")}</button>
              </div>
              {FooterNode}
          </div>
        )
    }
 }

 module.exports = Image;
